<template>
    <div id='login'>
        <div class='login-view'>

            <!-- wrapper begin -->
            <div class="login-wraps">
                
           
                <div class="wrapper">
                    <div class="wrap-top">
                       <!--  <header class="header">
                           <h1 class="header__title">小额贷款平台</h1>
                           <br><br>
                           <p>壹潘科技——金融科技服务专家</p>
                           <br>
                           <p>坚持以技术创新为中心立足第三方金融服务</p>
                           <br>
                           <p>向金融企业提供科技服务和解决方案</p>
                       </header> -->
                        <div class="main">
                            <div class="login-form animated">
                                <ul class="login-form__input">
                                    <li class="login-form__item passlog" >
                                       账号登录
                                    </li>
                                    <li class="login-form__item">
                                       <!-- <i class='iconfont icon-user'></i> -->
                                       <el-input   id="nameee" v-model='username' autofocus type="text" placeholder="用户名"
                                        clearable>
                                            <i slot="prefix" class="el-input__icon el-search">
                                                <img src="../images/my.jpg" alt="">
                                            </i>
                                        </el-input>
                                       <!--  <input v-model='username' type="text" placeholder="用户名"> -->
                                    </li>
                                   
                                    <li class="login-form__item">
                                       <!-- <i class='iconfont icon-user'></i> -->
                                       <el-input   v-model='password' placeholder="密码"type="password" clearable>
                                            <i slot="prefix" class="el-input__icon el-search">
                                                <img src="../images/pas.jpg" alt="">
                                            </i>
                                        </el-input>
                                       <!--  <input v-model='username' type="text" placeholder="用户名"> -->
                                    </li>
                                    <li  class="login-form__item">
                                       <!--  <span class="yanz">验证码:</span> -->
                                        <el-input
                                          class="yanzInp"
                                          placeholder="验证码"
                                          v-model="input10"
                                          size="small"
                                          clearable >
                                           <i slot="prefix" class="el-input__icon el-search">
                                                <img src="../images/vala.jpg" alt="">
                                            </i>
                                        </el-input>
                                        <div class="code" @click="refreshCode">
                                        <!-- <s-identify :identifyCode="identifyCode"></s-identify> -->
                                        <a class="yanz bor" v-text="yanzNum" @click="yclick ">{{yanzNum}}</a> 
                                        </div>
                                    </li>
                                </ul>
                                <div class="loginBtn" @click='login' :class='{"event-disabled":loggingIn}'>
                                    <div :loading='loggingIn'> 立即登录 </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                
            </div>
            
            <!-- wrapper end -->
        </div>
         <div class="footers">
            <footer-bar class='login-footer'></footer-bar>
         </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import  { mapGetters, mapActions }  from 'vuex'
    import md5 from '../utils/md5'
    import { loginApi, systemApi} from '../api/api'
    import { loginValidation } from '../validation/validation'
    import footerBar from '../components/FooterBar.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import SIdentify from '../components/identify.vue'

    export default {
        components:{
            footerBar,
            buttonLoading,
            SIdentify
        },
        data() {
            return {
                username:'',
                password:'',
                loggingIn:false,
                input10:"",
                yanzNum:"",
                identifyCodes: "123456789",
                identifyCode: ""
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo'
            ]),
            appConfig(){
                return this.localInfo.appConfig
            },
             captchaId(){
                console.log(this.localInfo.configInfo.checkCaptchaParam.captchaId)
               /* if(this.localInfo.configInfo && this.localInfo.configInfo.checkCaptchaParam){
                    return this.localInfo.configInfo.checkCaptchaParam.captchaId
                }*/
            },
            
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setUserId',
                'setUserInfo',
                'setSessionId',
                'setNeedLogin',
                'setAdmin',
                'setMenuList',
                'setAppConfig'
            ]),
            getSession(){
                this.loggingIn = true
                let password = this.password
                loginApi.userLogin({
                    accName:this.username,
                    accPwd:password,
                })
                .then(result=>{
                    this.setSessionId(result.sessionId)
                    this.setUserInfo(result.name)
                    this.loggingIn = false
                    localStorage.setItem("roles",result.roles)
                    console.log(result.menuList)
                    this.setMenuList(result.menuList)
                    this.$router.push({
                        name:'index'
                    })
                    
                    this.password="";
                    this.username="";
                })
                .catch(error => {
                    console.error(error)
                    this.loggingIn = false
                })
                
            },
            login(){
                if(!loginValidation({ username:this.username, password:this.password })) return
                    if(!this.input10|| this.input10!=this.yanzNum){ // this.identifyCode
                        this.setMsgTip({
                            text:"验证码错误",
                            type:"error"
                        })
                        return
                    }
                this.getSession()
                localStorage.setItem("admin",this.username)
            },
            yclick(){
                this.ynum()
            },
            ynum(){
                this.yanzNum=parseInt(Math.random()*(10000-999+1)+999)
            },
            randomNum(min, max) {
              return Math.floor(Math.random() * (max - min) + min);
            },
            refreshCode() {
                ///console.log(this.identifyCode)
              this.identifyCode = "";
              this.makeCode(this.identifyCodes, 4);
            },
            makeCode(o, l) {
              for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[
                  this.randomNum(0, this.identifyCodes.length)
                ];
              }
              console.log(this.identifyCode);
            }
           
        },
        created(){
            // this.setMsgTipStyle({ top:'50px' })
            this.ynum()
            systemApi.getAppConfig()
            .then(result=>{
                this.setAppConfig(result)
            })
            .catch(error=>{
                console.error(error)
            })
            localStorage.clear()
            this.setNeedLogin(false)
            let _this=this;
            let currenName=_this.$router.currentRoute.name;
            document.addEventListener("keyup",function(event){
                event.stopPropagation()
                if(_this.$router.currentRoute.name=="login"){
                    if(event.keyCode==13){
                    _this.login();
                    return
                }
                }
                
            })
        },
        mounted(){
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";  
    @import "../sass/extends";
    @import "../sass/mixins";
       .code {
        cursor: pointer;
          width: 93px;
          height: 44px;
          float: right;
          margin-right:14px;
        }
    .el-search img{
        margin-left:20px;
        margin-right:15px;
    }
    #login{
        height:100%;
        position:relative;
        //background:url('../images/bglogin.png');
        background-size: 100% 100%;

    }
    .login-wraps{
        width:910px;
        //height:569px;
        margin:0 auto;
    }
    .footers{
        width:100%;
        height:16%;
        background: #2e324f;
    }
    .login-view{
        position:relative;
        width:100%;
        // height:100%;
        background:url('../images/bglogin.png');
        background-size: 100% 100%;
    }
   
   
    .bor{
        border:1px solid #dcdfe6;
        float: right;
        width:96px;
        color:#409EFF!important;
        line-height:30px;
        text-align: center;
        font-size:16px;
    }
    .bor:hover{
        cursor: pointer;
    }
    
    .yanz{
        color:#757575;
        width:93px;
        height:44px;
        line-height:44px;
        -webkit-border-radius:4px;
        background:#fff;
        -moz-border-radius:4px;
        border-radius:4px;
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
        //font-size: 20px;
        //margin-right:30px;
    }
    .el-input{
        width:338px;
        height:44px!important;
    }
    
    .login-view{
        background-size:100% 100%;
        color:$importColor;
        height:84%;
        // background:url("../images/bglogin.png");
        &:before{
            content:'';
            position: absolute;
            width: 100%;
            height:100%;
            top:0;
            left:0;
            background: #f5f5f5;
            z-index:-2;
        }
        &:after{
            content:'';
            position: absolute;
            width: 100%;
            height:100%;
            top:0;
            left:0;
            z-index:-1;
        }
        /* .wrapper{
            width: 100%;
            height:100%;
            box-sizing:border-box;
            position: relative;
             background:url("../images/footerbg.jpg");
        } */
        .wrap-top{
            width:910px;
            height:462px;
            position: absolute;
            top:50%;
            right:20%;
            margin-top:-231px;
        }
        .header{
            margin-top:66px;
            text-align:left;
            float: left;
        }
        .header__title{
            @extend %weight-light;
            font-weight: normal;
            font-size: 26px;
            color:#35373b;
            font-weight:600;
            p{
                font-size:18px;
                color:#4a4a4a;
                font-weight:600;
            }
        }
        .header__company{
            @extend %weight-light;
            font-size: 14px;
            color:$dark;
            padding-top:10px;
        }
        .main{
            width:338px;
            //padding-top:80px;
            border-radius:4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            height:100%;
            float: right;
        }
        .passlog{
            display: block;
            text-align: center;
            font-size:20px;
        }
        .login-form{
            width: 338px;
            margin-left:50px;
        }
        .login-form__input{
            width: 100%;
            overflow:hidden;
            .iconfont{
                font-size:20px;
                color:$defaultColor;
                padding:0 12px;
            }
            input{
                flex:1;
                font-size: 15px;
               
            }
        }
        .login-form__item{
            // display:flex;
            width:352px;
            align-items:center;
            margin-bottom:20px;
        }
        .login-form__item:nth-child(1){
            margin-top:80px;
            font-size:24px;
            color:#666;
            opacity:.8;
            text-align:left;
            margin-bottom:30px;
            filter:alpha(opacity=80);  /*支持 IE 浏览器*/
            -moz-opacity:.8; /*支持 FireFox 浏览器*/
            -khtml-opacity: .8; /*webkit内核浏览器*/
        }
        .login-formbutton{
            margin-top: 20px;
             /*margin-bottom:80px; */
            height:46px;
            width:352px;
            color:#fff;
            opacity:.8;
            .button{

                background:url(../images/footerbg.jpg);
            }
        }
        .login-footer{
            width:100%;
            height:100%;
            //padding-top: 2%;
        }
        
        .yanzInp {
            width:225px;
        }
        .component-button-loading{
            height:46px!important;
        }
        .loginBtn{
            height:50px;
            width:338px;
            background:url(../images/footerbg.jpg);
            -weblit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
            margin-top:20px;
            line-height:50px;
            
        }
        .loginBtn div{
            text-align:center;
            font-size:18px;
            color:#fff;
            opacity:.8;
            cursor:pointer;
        }
    }
   
</style>
